<script setup>
import useLoginStore from '@/store/user/index.js'
import { useRoute } from 'vue-router'
import router from '@/router/index.js'
import { activeRouter } from '@/utils/addRoute.js'
import { computed } from 'vue'


const menus1 = [
  {
    children: [{ component: '/main/home', menuId: '2-1' }]
  },
  {
    children: [{ component: '/main/search', menuId: '2-2' }]
  },
  {
    children: [{ component: '/main/goods', menuId: '2-3' }]
  }
]

defineProps({
  isFold: {
    type: Boolean,
    default: true
  }
})

const loginStore = useLoginStore()
//菜单路由跳转
const changePageInfo = (path) => {
  router.push(path)
}
const role = JSON.parse(localStorage.getItem('loginInfo')).role

//找到激活的路由
//获取当前选择的路由信息
const route = useRoute()

const activeMenuId = computed(() => {
  console.log('route.path', route.path)
  console.log('loginStore.menus', menus1)
  console.log('activeRouter(route.path, loginStore.menus)', activeRouter(route.path, menus1))
  return activeRouter(route.path, menus1)
})

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="side-bar">
    <el-menu background-color="#fff" class="el-menu-vertical-demo" :default-active="activeMenuId" text-color="#000"
      :default-openeds="['2']">
      <!--      所有用户都可以访问的主菜单-->
      <el-sub-menu index="2" v-if="role == 'admin' || role == 'user'">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span class="menuTitle">工作台</span>
        </template>
        <el-menu-item index="2-1" @click="changePageInfo('/main/home')">生成任务</el-menu-item>
        <el-menu-item index="2-2" @click="changePageInfo('/main/search')">任务查询</el-menu-item>
        <!-- <el-menu-item index="2-3" @click="changePageInfo('/main/goods')">物料清单查询</el-menu-item> -->
      </el-sub-menu>

      <el-sub-menu index="3" v-if="role == 'admin'">
        <template #title>
          <el-icon>
            <Menu />
          </el-icon>
          <span class="menuTitle">外部数据接入</span>
        </template>
        <el-menu-item index="3-1" @click="changePageInfo('/main/exterior')">开标时间</el-menu-item>
        <el-menu-item index="3-2" @click="changePageInfo('/main/material')">优选物料</el-menu-item>
        <el-menu-item index="3-3" @click="changePageInfo('/main/fixeNetwork')">参考价格</el-menu-item>
        <el-menu-item index="3-4" @click="changePageInfo('/main/InventoryAge')">库存物资</el-menu-item>
        <el-menu-item index="3-5" @click="changePageInfo('/main/curingId')">固化ID</el-menu-item>
        <el-menu-item index="3-6" @click="changePageInfo('/main/dirExport')">标准化目录</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4" v-if="role == 'admin'">
        <template #title>
          <el-icon>
            <Menu />
          </el-icon>
          <span class="menuTitle">系统管理</span>
        </template>
        <el-menu-item index="4-1" @click="changePageInfo('/main/accout')">账号管理</el-menu-item>
      </el-sub-menu>
      <!-- <el-menu-item @click="changePageInfo('/main/goods')">
        <template #title>
          <el-icon><TakeawayBox /></el-icon>
          <span class="menuTitle">物资管理</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="changePageInfo('/main/dataAnalysis')">
        <template #title>
          <el-icon><TrendCharts /></el-icon>
          <span class="menuTitle">数据分析</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="changePageInfo('/main/system/user')">
        <template #title>
          <el-icon><Avatar /></el-icon>
          <span class="menuTitle">人员管理</span>
        </template>
      </el-menu-item> -->

      <template v-for="item in loginStore.menus" :key="item.menuId">
        <el-sub-menu :index="item.menuId + ''">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span class="menuTitle">{{ item.menuName }}</span>
          </template>
          <!--          遍历子菜单-->
          <template v-for="itemChildren in item.children" :key="itemChildren.menuId">
            <el-menu-item :index="itemChildren.menuId + ''" @click="changePageInfo(itemChildren.component)">{{
              itemChildren.menuName }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<style scoped lang="less">
:root {
  --el-menu-active-color: #ff6347;
  /* 这里是一个示例颜色，你可以替换成你想要的十六进制颜色 */
}

.side-bar {
  height: 100vh;
  overflow-y: hidden;

  .el-menu {
    margin-left: -10px;

    .menuTitle {
      margin-left: 10px;
    }
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(48, 65, 86);

    img {
      margin-right: 5px;
      width: 32px;
      height: 32px;
    }

    .title {
      padding: 15px 0;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .el-menu {
    height: 100%;
  }
}
</style>
